Your Image


// This is a (super) basic how-to format an HTML document to make a static webpage.
Enjoy.



Pt. I: A Primer



For this how-to you will want: (Either) Visual Studio Code, Atom, PyCharm; or some equivalent code editor. You could write this in something like TextEdit if you want, but it would be easier to use a better environment for hundreds of reasons you'll soon discover.

Before we start, we are going to explain some basics: HTML stands for 'hyper text markup language.' It is a machine language for handling documents made to be displayed inside of web browsers. It is often used in conjunction with Cascading Style Sheets (CSS), but this document only covers basic HTML. Essentially, it just is a semantic structure for describing how things should look. < > are your main movers and shakers in this language, announcing the arrival and departure of little snippets of code to accomplish things like formatting headers, paragraphs, fonts, italics, hyperlinks, lists, and tables. You'll catch on quickly!

This portion will be natural language, but starting below the line, everything will be formatted exactly the way it would be in the document to show you what you would see (if you were to imagine all of the code bits as being invisible, it's kinda meta, like HTML-ception).

We will start by creating a text document, naming it 'index.html' and saving it to your desktop. Depending on what text editor you have, it may be easier to save a .txt named 'index' and then to rename index.txt to index.html. This should be straightforward on most systems, but on some older windows machines, this was not enabled by default and you would have to look up how to enable renaming dot addresses like .txt, .png, .doc, and so on. On Mac, it will ask you if you want to change the suffix, just simply click 'yes'.

Then, open it in your code editor of choice and also open it in your web browser. This will be your monitor that allows you to render and see what you are writing in html. Right now it's blank, but we will fix that. When you're done writing statements of code, save your document and refresh the browser to see the changes.

Now first, we are going to go to the code editor write the 'head' section, which is a set of typical declarations for a basic HTML document. This section typically contains meta-information about the document, such as the document's character encoding, viewport settings, and the document's title. Here's a breakdown of what each part does:





Pt. II: That's so meta



<!DOCTYPE html>
<html>
<head>
<style>
.indented-line{
text-indent: 50px;
}

.first-indent{
text-indent: 50px;
}

.second-indent{
text-indent: 100px;
}

.third-indent{
text-indent: 150px;
}

.indented-text{
padding-left: 50px;
}

* {
font-family:'Courier New', Courier, monospace;
}
</style>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<title>
My Second Website
</title>

</head>


<h1> To use heading type 1 </h1>

<h2> To use heading type 2 </h2>

<h3> To use heading type 3 </h3>

<h4> To use heading type 4 </h4>

<h5> To use heading type 5 </h5>
<h6> To use heading type 6 </h6>

<br>For line breaks <br>

<p>

For paragraphs, you can use these paragraph element (<p> and </p>). When you do this, things wont appear indented because I used additional formatting to make this indent appear. I wanted it to look like it would in Visual Code's console if you set it inbetween <p> and </p> and hit enter. This is called nesting. In most machine languages, nesting is intrinsic to the way that logic flow and loops operate. In HTML, this is not the case, as indentation has no operative value, but it does help for human legibiltiy. Practicing good indentation will keep your .html documents easy to read and edit for yourself and others.

</p>

<p>

Note: You can see negative space between these two paragraphs, but no line breaks were employed. The paragraph element automatically creates them inbetween instances of paragraph elements. On a second note, to format this correctly with indentation, I had to use style settings in the header to set padding parameters. I then used <p class="indented-text"> and </p> to create this segement with indentation which I set above. I wanted to also take a moment to point out that there are a bunch of indentation values delineated in the style head that are unused in the how-to. I used these values to format the document itself. The text-indent value is declared and affects a single line when used with <span class="indented-line" style="display: inline-block;"> .indented-text can be called similarly; however, they work slightly differently. <p class="indented-text"> </p> will indent the whole paragraph that is between the paragraph elements. first-indent is redundant to indented-line but I wound up making it later to match the other iterations so I could see the formatting more legibly in the console at a glance when doing the header with all the nested structures above.

</p>

Make a line like below with <hr>




<b> Make bold text like this </b>
<i> Use italics like so </i>
<u> To use underscore, try these </u>
<em> Emphasis is italics with an accent I guess </em>
<strong> Similarly, Strong is just bold with uhhh.... bold... <strong>

This is an example of a hyperlinked website.

It is formatted like so:
<a href="https://www.google.com"> This is an example of a hyperlinked website. </a>

This is an example of a target, which instead of opening a web page in the active browser window, opens it in a new tab

It is formatted similarly:
<a href="https://www.google.com" target="_blank">This is an example of a target, which instead of opening a web page in the active browser window, opens it in a new tab.</a>



Let's embed an image with the following code. Note: you'll have to copy the 'path' to the image you want to use and paste it where I've highlighted the path to the directory where my image is. On Mac, select the image you want to use in file browser and go to the edit tab above, and hold down option key; you'll see 'copy' turn into 'copy path'. Similarly, on Windows, you can hold shift and right click the file/ folder and you will see 'Copy as Path' as an option.

<img src="/Users/tyron/Desktop/My First HTML/icon.png" height="200" width="" border="10" alt="Bird!">

Bird!

Notes:





Let's make a list, and a nested list. Look out Julie Andrews, these are some of my favorite things.

<ul> To open an unordered list with the list elements framed inside the tags




Ok, let's make a table... <table> border="10" cellpadding="10" cellspacing="0" to create table object
<tr> to create a row, <th> and </th> to create an header in a row, <td> and </td> to create cells inside of a row's tags like: <tr> <td> and </td> </tr>. There's honestly a lot more that I could say about tables because they're intuitive but have a hitch or two if you leave blanks. This is where my ability to be meta inherently breaks down due to the interelationship of form and content, so I encourage you to experiment.

Names Date of Arrival Coat Eye Color Indoor/ Outdoor Nationality Temperment
Cats Luna April 2016 Gray Tabby Green Indoor American Sweet
Appa July 2016 White Yellow Indoor American Spicy
Lama March 2021 White + Gray Tabby Green Outdoor Polish Talkative